<template>
	<div class="admin-page">
		<div class="search-section">
			<div class="search-form">
				<div class="search-item">
					<input type="text" v-model="tabeq.tab_name" placeholder="请输入标签名称" />
				</div>
				<div class="search-buttons">
					<button class="primary" @click="getTabData()">
						<i class="el-icon-search"></i>
						搜索
					</button>
					<button class="default" @click="resetSearch()">
						<i class="el-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</div>
		<div class="table-section">
			<el-card class="box-card" shadow="never">
				<template #header>
					<div class="card-header">
						<span>标签列表</span>
						<el-button type="primary" @click="handleAdd">添加标签</el-button>
					</div>
				</template>
				<!-- 表格主体 -->
				<el-table :data="paginatedTableData" border highlight-current-row @row-click="handleRowClick"
					empty-text="暂无标签数据" @selection-change="handleSelectionChange" ref="tabTableRef">
					<!-- 表格列定义 -->
					<el-table-column prop="id" label="ID" min-width="80" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column prop="tab_name" label="标签名称" min-width="200" show-overflow-tooltip align="center">
						<template #default="scope">
							<el-tag>{{ scope.row.tab_name }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200" align="center" fixed="right">
						<template #default="scope">
							<el-button type="danger" link class="operation-button danger"
								@click.stop="handleDelete(scope.row)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页控件 -->
				<div class="pagination-container">
					<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalItems"
						:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :current-page="currentPage"
						@size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</el-card>

			<!-- 编辑/添加标签对话框 -->
			<el-dialog :title="dialogTitle" v-model="dialogVisible" width="30%" :close-on-click-modal="false">
				<el-form :model="tabForm" label-width="80px">
					<el-form-item label="标签名称">
						<el-input v-model="tabForm.tab_name" placeholder="请输入标签名称" />
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogVisible = false">取消</el-button>
						<el-button type="primary" @click="handleSave">确定</el-button>
					</span>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue";
	import axios from "@/api/apiaxios";
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';

	const tabeq = ref({
		tab_name: null
	});

	// --- 表格数据源 ---
	const allTabData = ref([]);

	// --- 表格实例引用 ---
	const tabTableRef = ref(null);

	// --- 选择状态 ---
	const multipleSelection = ref([]);

	// --- 分页状态 ---
	const currentPage = ref(1);
	const pageSize = ref(10);

	// --- 对话框状态 ---
	const dialogVisible = ref(false);
	const dialogTitle = ref('');
	const tabForm = ref({
		id: null,
		tab_name: ''
	});

	// --- 计算属性 ---
	const totalItems = computed(() => allTabData.value.length);

	const paginatedTableData = computed(() => {
		if (!allTabData.value || allTabData.value.length === 0) {
			return [];
		}
		const startIndex = (currentPage.value - 1) * pageSize.value;
		const endIndex = startIndex + pageSize.value;
		return allTabData.value.slice(startIndex, endIndex);
	});

	// --- 方法 ---
	const handleRowClick = (row) => {
		console.log("Row clicked:", row);
	};

	const handleSelectionChange = (selection) => {
		multipleSelection.value = selection;
	};

	const handleSizeChange = (newSize) => {
		pageSize.value = newSize;
		currentPage.value = 1;
	};

	const handleCurrentChange = (newPage) => {
		currentPage.value = newPage;
	};

	const handleAdd = () => {
		dialogTitle.value = '添加标签';
		tabForm.value = {
			id: null,
			tab_name: ''
		};
		dialogVisible.value = true;
	};

	const handleEdit = (row) => {
		dialogTitle.value = '编辑标签';
		tabForm.value = {
			...row
		};
		dialogVisible.value = true;
	};
	const handleDelete = (row) => {
		ElMessageBox.confirm(
				`确定要删除标签 "${row.tab_name}" 吗？`,
				'警告', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				// 这里添加删除文章的逻辑
				console.log(row);
				const tabs = {
					tab_name: row.tab_name
				};
				const res = axios.post("/api/tabs/deleteAlleq",
					tabs, {
						headers: {
							'Content-Type': 'application/json'
						}
					});

				res
					.then(response => {
						if (response.data.code == 200) {
							// 这里添加保存文章的逻辑
							ElMessage({
								type: 'success',
								message: '删除成功',
							});

						} else {
							ElMessage.error(response.data.message || '删除失败');
						}
					})
					.catch(error => {
						console.error('请求失败:', error);
						ElMessage.error('网络请求失败，请稍后重试');
					});

			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消删除',
				});
			});
	};
	const handleSave = () => {
		if (!tabForm.value.tab_name.trim()) {
			ElMessage.warning('请输入标签名');
			return;
		}

		const tabs = {
			tab_name: tabForm.value.tab_name
		};
		const res = axios.post("/api/tabs/insert",
			tabs, {
				headers: {
					'Content-Type': 'application/json'
				}
			});

		res
			.then(response => {
				console.log(response);
				if (response.data.code == 200) {
					// 这里添加保存文章的逻辑
					ElMessage({
						type: 'success',
						message: '添加成功'
					});
				} else {
					ElMessage.error(response.data.message || '修改失败');
				}
			})
			.catch(error => {
				console.error('请求失败:', error);
				ElMessage.error('网络请求失败，请稍后重试');
			});

		dialogVisible.value = false;
		setTimeout(() => {
			getTabData(); // 延迟 500 毫秒后执行函数
		}, 500); // 刷新列表
	};
	const viewRatio = (row) => {
		console.log("View Ratio clicked for row:", row)
		// Add logic for viewing ratio
	}

	function getTabData() {
		const res = axios.post("/api/tabs/selecteq",
			tabeq.value, {
				headers: {
					'Content-Type': 'application/json'
				}
			});

		res
			.then(response => {
				if (response.data.code == 200) {
					allTabData.value = response.data.data;
					if (allTabData.value.length === 0) {
						ElMessage({
							message: '未找到匹配的标签数据',
							type: 'warning'
						});
					}
				} else {
					ElMessage.error(response.data.message || '查询失败');
				}
			})
			.catch(error => {
				console.error('请求失败:', error);
				ElMessage.error('网络请求失败，请稍后重试');
			});
	}

	// 添加重置搜索条件的方法
	const resetSearch = () => {
		tabeq.value = {
			tab_name: null
		};
		getTabData(); // 重置后自动搜索
	};

	onMounted(() => {
		getTabData();
	});
</script>

<style lang="scss" scoped>
	/* 页面容器样式 */
	.admin-page {
		padding: 20px;
		background-color: #f5f7fa;
		min-height: calc(100vh - 60px);
		position: absolute;
		//margin:20px;
		top: 25px;
		//overflow-y: hidden;
	}

	/* 搜索区域样式 */
	.search-section {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
		padding: 24px;
		margin-bottom: 20px;

		.search-form {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			align-items: center;
		}

		.search-item {
			flex: 1;
			min-width: 200px;
			max-width: 300px;
		}

		input {
			width: 100%;
			height: 40px;
			padding: 0 15px;
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			transition: all 0.3s;
			outline: none;
			font-size: 14px;
			color: #606266;
			background-color: #fff;

			&:focus {
				border-color: #409eff;
				box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
			}

			&::placeholder {
				color: #c0c4cc;
			}
		}

		.search-buttons {
			display: flex;
			gap: 12px;
			margin-left: auto;
		}

		button {
			min-width: 88px;
			height: 40px;
			padding: 0 20px;
			font-size: 14px;
			border-radius: 4px;
			border: none;
			cursor: pointer;
			transition: all 0.3s;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;

			&.primary {
				background-color: #409eff;
				color: white;

				&:hover {
					background-color: #66b1ff;
				}

				&:active {
					background-color: #3a8ee6;
				}
			}

			&.default {
				background-color: #fff;
				border: 1px solid #dcdfe6;
				color: #606266;

				&:hover {
					border-color: #409eff;
					color: #409eff;
				}
			}
		}
	}

	/* 表格区域样式 */
	.table-section {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
		overflow: hidden;

		.box-card {
			border: none;

			:deep(.el-card__header) {
				padding: 20px 24px;
				border-bottom: 1px solid #ebeef5;
				background-color: #fff;
			}

			:deep(.el-card__body) {
				padding: 0;
			}
		}

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			span {
				font-size: 16px;
				font-weight: 500;
				color: #303133;
			}
		}

		/* 表格样式 */
		:deep(.el-table) {
			max-height: calc(100vh - 300px);

			th {
				background-color: #f5f7fa;
				color: #606266;
				font-weight: 500;
				padding: 12px 0;
				border-bottom: 1px solid #ebeef5;
			}

			td {
				padding: 12px 0;
				border-bottom: 1px solid #ebeef5;
			}

			.el-table__empty-block {
				min-height: 200px;

				.el-table__empty-text {
					color: #909399;
					font-size: 14px;
				}
			}

			.cell {
				line-height: 1.5;
			}
		}

		/* 分页控件样式 */
		.pagination-container {
			padding: 20px 24px;
			display: flex;
			justify-content: flex-end;
			background-color: #fff;
			border-top: 1px solid #ebeef5;

			:deep(.el-pagination) {
				button {
					min-width: 32px;
					height: 32px;

					&:disabled {
						background-color: #f5f7fa;
					}
				}

				.el-pagination__total {
					margin-right: 16px;
					font-size: 14px;
				}

				.el-pagination__sizes {
					margin-right: 16px;
				}

				.el-pager li {
					min-width: 32px;
					height: 32px;
					line-height: 32px;
					font-size: 14px;

					&.active {
						background-color: #409eff;
						color: #fff;
					}

					&:hover {
						color: #409eff;
					}
				}
			}
		}
	}

	/* 操作按钮样式 */
	.operation-button {
		padding: 6px 16px;
		font-size: 14px;
		border-radius: 4px;
		transition: all 0.3s;

		&.primary {
			color: #409eff;

			&:hover {
				color: #66b1ff;
				background-color: #ecf5ff;
			}
		}

		&.danger {
			color: #f56c6c;

			&:hover {
				color: #f78989;
				background-color: #fef0f0;
			}
		}
	}

	/* 标签特有的样式 */
	.tag-content {
		padding: 8px 12px;
		line-height: 1.6;
		text-align: left;
		word-break: break-all;
		color: #606266;
	}

	:deep(.el-tag) {
		margin-right: 8px;
		background-color: #ecf5ff;
		border-color: #d9ecff;
		color: #409eff;
	}

	/* 对话框样式 */
	:deep(.el-dialog) {
		border-radius: 8px;
		overflow: hidden;

		.el-dialog__header {
			margin: 0;
			padding: 20px 24px;
			border-bottom: 1px solid #ebeef5;

			.el-dialog__title {
				font-size: 16px;
				font-weight: 500;
				color: #303133;
			}
		}

		.el-dialog__body {
			padding: 24px;
		}

		.el-dialog__footer {
			padding: 16px 24px;
			border-top: 1px solid #ebeef5;
		}
	}

	/* 表单样式 */
	:deep(.el-form) {
		.el-form-item__label {
			font-weight: 400;
			color: #606266;
		}

		.el-input__inner {
			border-radius: 4px;
		}

		.el-textarea__inner {
			border-radius: 4px;
		}
	}

	.dialog-footer {
		padding-top: 20px;
		text-align: right;
	}
</style>